<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-descriptions title="详情"></el-descriptions>
      </div>
      <el-descriptions>
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card" style="margin-top: 30px">
      <div slot="header" class="clearfix">
        <el-descriptions title="列表"></el-descriptions>
      </div>
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%;margin-left: 10px"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="名称"
          width="200"
        />
        <el-table-column
          prop="tag"
          label="国籍"
          width="100"
          :filters="[{ text: '国内', value: '国内' }, { text: '国外', value: '国外' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.tag === '国内' ? 'primary' : 'success'"
              disable-transitions
            >{{ scope.row.tag }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          label="简介"
        />
        <el-table-column
          prop="date"
          label="日期"
          sortable
          width="380"
          column-key="date"
          :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
          :filter-method="filterHandler"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        title: '王小虎',
        desc: '上海市普陀区金沙江路 1518 弄',
        tag: '国内',
        date: '2016-05-02'
      }, {
        title: '王小虎',
        desc: '上海市普陀区金沙江路 1518 弄',
        tag: '国内',
        date: '2016-05-02'
      }, {
        title: '王小虎',
        desc: '上海市普陀区金沙江路 1518 弄',
        tag: '国内',
        date: '2016-05-02'
      }, {
        title: '王小虎',
        desc: '上海市普陀区金沙江路 1518 弄',
        tag: '国内',
        date: '2016-05-02'
      }]
    }
  }
}
</script>
